<!-- 主页 -->
<template>
  <div class="home_box">
    <div class="menu_left">
      <div v-for="item in childrenList">
        <!-- 左边的菜单 -->
        <router-link class="link" :to="item.path"> {{ item.name }}</router-link>
      </div>
    </div>
    <div class="content_box">
      <!-- 右边的二级路由出口 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onBeforeMount, onMounted } from "vue";
import childrenList from "../../route/childrenList.js";

onBeforeMount(() => {});
onMounted(() => {});
</script>
<style scoped lang="less">
.home_box {
  display: flex;
}
.menu_left {
  width: 100px;
  height: 100vh;
  overflow: auto;
  background-color: #f0f0f0;
  border-right: 1px solid #ccc;
  .link {
    color: #333;
  }
}
.menu_left div {
  padding: 10px;
  cursor: pointer;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
}
.menu_left div:hover {
  background-color: #6fd0ee;
  .link {
    color: #222;
  }
}
.content_box {
  width: calc(100% - 100px);
  margin-left: 10px;
  padding: 10px;
}
</style>
